<template>
  <div class="search-container">
    <div style="font-weight: bold;font-size: 1.4rem;padding: 10px 0;text-shadow: 0px 6px 9px #c6c6c6;"
         class="font-theme-color text-center"><span>搜索结果：共 <span style="color: red">({{ total }})</span>条</span></div>
    <a-spin tip="加载中" :spinning="isLoading" class="loading"/>
    <div class="search-items" style="position: relative">
      <div v-show="!isLoading">
        <div class="search-item clearfix" v-for="(item,index) of resultList" @click="toDetail(item)" :key="index">
          <div class="search-item-title clearfix">
            <span class="" v-html="item.title"></span>
            <a-tag class="flot-right" color="#108ee9">类型</a-tag>
          </div>
          <div class="search-item-content m-t-10 ellipsis-4" v-html="item.content"></div>
          <span class="flot-right font-color-999 m-t-10">发布时间：{{ item.createTime }}</span>
        </div>
      </div>
    </div>
    <div class="m-b-10">
      <a-pagination class="text-center" :hideOnSinglePage="true" @change="paginationChange"
                    v-model:current="queryParam.current" v-model:page-size="queryParam.size" :total="total"/>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "search"
}
</script>

<script lang="ts" setup>
import {useRoute} from "vue-router";
import {searchPage} from "/@/api/portal/search";
import {onMounted, reactive, ref, watch} from "vue";
import {SearchListGetResultPageModel, SearchModal} from "/@/api/portal/model/searchModal";
import {useLoading} from "/@/hooks/web/useLoading";
import {useGo} from "/@/hooks/web/usePage";

const route = useRoute();
const go = useGo();
const {isLoading, loading, done} = useLoading();
const queryParam = reactive({
  current: 1,
  size: 4,
  title: ''
})
const total = ref<number>(0);
const resultList = ref<SearchModal[]>();

function fetchPageList() {
  loading()
  queryParam.title = route.query.keyword as string;
  searchPage(queryParam).then((res: SearchListGetResultPageModel) => {
    setTimeout(() => {
      resultList.value = res.records;
      total.value = res.total;
      done()
    }, 500)
  })
}

fetchPageList();

//详情页
function toDetail(item: SearchModal) {

}

function paginationChange() {
  fetchPageList();
}
</script>

<style lang="less" scoped>

.search-items {
  min-height: 600px;
}

.search-item {
  padding: 10px;
  margin-bottom: 15px;
  box-sizing: border-box;
  border: 1px solid #efefee;
  height: 200px;
  cursor: pointer;

  &-title {
    font-weight: bold;
    font-size: 1.2rem;
    transition: .4s;
  }

  &-content {
    font-size: 1rem;
    height: 100px;
  }

  &:hover &-title {
    transform: translateX(2px);
    color: @theme-color
  }

  &:hover &-content {
    color: #999999;
  }
}
</style>
